<template>
  <div class="pt30">
    <Row :gutter="8" type="flex" justify="space-between">
      <Col flex="210px">
        <div class="box-sty">
          <h3>公开事项类型</h3>
          <Menu mode="inline"  :inline-collapsed="collapsed" @click="handleClick"
                v-model:openKeys="openKeys"  v-model:selectedKeys="selectedKeys">
            <SubMenu key="sub1">
              <template #title>企业资质审批</template>
              <MenuItem key="aptNoticeNotice">资质审查结果公示</MenuItem>
              <MenuItem key="aptNoticePublish">资质审批结果公告</MenuItem>
            </SubMenu>
            <SubMenu key="sub2">
              <template #title>安全生产许可证审批</template>
              <MenuItem key="safetyNotice">安许证审查结果公示</MenuItem>
              <MenuItem key="safetyPublish">安许证审批结果公告</MenuItem>
            </SubMenu>
            <SubMenu key="sub3">
              <template #title>人员注册审批</template>
              <MenuItem key="constructorNotice">二级建造师审查公示</MenuItem>
              <MenuItem key="constructorPublish">二级建造师审批公告</MenuItem>
              <MenuItem key="constructorNotice2">二级建筑师审查公示</MenuItem>
              <MenuItem key="constructorPublish2">二级建筑师审批公告</MenuItem>
              <MenuItem key="constructorNotice3">二级结构工程师审查公示</MenuItem>
              <MenuItem key="constructorPublish3">二级结构工程师审批公告</MenuItem>
              <MenuItem key="constructorNotice4">二级造价工程师审查公示</MenuItem>
              <MenuItem key="constructorPublish4">二级造价工程师审批公告</MenuItem>
            </SubMenu>
            <SubMenu key="sub4">
              <template #title>企业进疆报送</template>
              <MenuItem key="register">进疆登记企业信息公示</MenuItem>
              <MenuItem key="contract">造价企业承揽业务公示</MenuItem>
            </SubMenu>
          </Menu>
        </div>
      </Col>
      <Col flex="990px" class="bgWhite">
        <RouterView :key="$route.fullPath"/>
      </Col>
    </Row>
  </div>

</template>

<script lang="ts" >
import {  Row, Col, Menu } from "ant-design-vue";
import { useRouter, useRoute } from "vue-router";
import {defineComponent, reactive, toRefs} from "vue";

enum subEnum {
  aptNoticeNotice = 'sub1',
  aptNoticePublish = 'sub1',
  safetyNotice = 'sub2',
  safetyPublish = 'sub2',
  constructorNotice = 'sub3',
  constructorNotice2 = 'sub3',
  constructorNotice3 = 'sub3',
  constructorPublish = 'sub3',
  constructorPublish2 = 'sub3',
  constructorPublish3 = 'sub3',
  register = 'sub4',
  contract = 'sub4'
}

export default defineComponent({
  name: "matter",
  components: {
    Row,
    Col,
    Menu ,
    MenuItem:Menu.Item,
    SubMenu:Menu.SubMenu
  },
  setup() {
    const router = useRouter();
    let { path } = useRoute();
    let defaultPath:string = path.split('/').pop() as string;
    const state = reactive({
      collapsed: false,
      selectedKeys: [defaultPath],
      openKeys: [ subEnum[defaultPath]],
      preOpenKeys: [subEnum[defaultPath]],
    })

    const handleClick = (e) => {
      jumpPage( e.key )
    }

    const jumpPage = data => {
      router.push({ path: '/public/matter/'+data });
    }

    return {
      ...toRefs(state),handleClick , jumpPage
    }

  }
})
</script>


<style lang="less" scoped>

::v-deep(.ant-menu){

  .ant-menu-item {
    padding-left: 25px !important;
  }

  .ant-menu-submenu-title {
      font-weight: bold;
  }

}






</style>


